/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
Ext.define('MajorProjectSenchaTouch.view.ShelfLocator' ,{
    extend: 'Ext.Container',
    xtype: 'shelflocatorpage',
    config:{
        layout: 'fit',
        items: [
        {
            xtype: 'panel',
            id: 'collectionShelfnumberPanel',
            html: 'No Image'
            /*items:[
                {
                    xtype: 'container',
                    html: 'HAHHAHAHAHAHAHAHA'
                }
            ]*/
            /*docked: 'top',
            xtype: 'toolbar',
            title: 'Overlay Title',
            layout:{
                pack: 'right'
            },
            items:[
            {
                xtype: 'button', 
                id: 'slCloseBtn',
                ui: 'plain',
                iconCls:'delete_black2',
                iconMask: true,
                pressedCls: null
            }
            ]*/
        },
        //scroll working but scroll will auto-center
        {
            xtype: 'container',
            id: 'shelfImageContainer',
            scrollable:
            {
                direction: 'both',
                directionLock: false,
                indicators: false,
                momentumEasing: {
                    momentum: {
                        acceleration: 60,
                        friction: 0.3
                    },
                    bounce: {
                        acceleration: 30,
                        springTension: 0.3
                    }
                }
            },
            items: [
                {
                    xtype: 'image',
                    id: 'shelfImage',
                    mode: '',
                    //cls: 'carousel-item-img',
                    //width: '320px',
                    //height: '240px',
                    //centered: true,
                    listeners: {
                        pinch: {
                            element: 'element',
                            fn: function(e) {
                                //Ext.Msg.alert("hello");
                                var transformDetails = {
                                    scale: 0,
                                    angle: 0
                                };
                                transformDetails.scale = e.scale;
                                var image = Ext.getCmp('shelfImage');
                                image.element.setStyle('-webkit-transform', 'scaleX(' + transformDetails.scale + ') scaleY(' + transformDetails.scale + ') rotate(' + transformDetails.angle + 'deg)');
                            }
                        }
                    }
                }
            ]         
        }
        
        ]
    }
});